<template>
  <a-drawer v-model:open="open" width="80%"
            :footer="null"
            style="top: 20px"
            title="全部船员信息"
            :keyboard="false"
            :mask-closable="false"
            @close="handleClose"
            @cancel="handleClose">
    <div>
      <div class="flex" style="justify-content: flex-end;margin-bottom: 10px;">
        <a-input  size="small"  style="width: 160px;margin-right: 10px" placeholder="请输入船员姓名" allow-clear/>
        <a-input  size="small"  style="width: 160px;margin-right: 10px" placeholder="请输入身份证号" allow-clear/>
        <a-button type="primary"  size="small" class="mr10">
          搜索
        </a-button>
        <a-button type="primary" ghost size="small">
          重置
        </a-button>
      </div>
      <a-table
          :columns="columns"
          rowClassName="items"
          :loading="tableLoading"
          rowKey="id"
          :pagination="false"
          :data-source="tableData"
          style="height:calc(100vh - 215px)"
          size="small"  bordered>
        <template #bodyCell="{ column,text,record,index }">
          <template v-if="column.dataIndex==='selectNum'">
            <div class="flex justify-center">
              <a-radio></a-radio>
            </div>
          </template>
          <template v-if="column.dataIndex === 'operation'">
            <div class="editable-row-operations">
              <a-popconfirm title="你确定删除吗?"  @confirm="handleDeleteDepartment(record.id)">
                <a-button type="primary"  size="small" danger>
                  <template #icon>
                    <CloseOutlined
                        style="font-size:12px"/>
                  </template>
                  删除
                </a-button>
              </a-popconfirm>
            </div>
          </template>
        </template>
      </a-table>
      <div class="flex  mt20">
        <a-pagination
            v-model:current="queryParams.pageNo"
            v-model:page-size="queryParams.pageSize"
            @change="handleChangePageNo"
            :page-size-options="pageSizeOptions"
            :show-total="total => `共 ${total} 项`"
            show-size-changer
            :total="total"/>
      </div>
    </div>
  </a-drawer>
</template>
<script setup>
const open = ref(false)
const tableLoading = ref(false)
const total = ref(0)
const tableData = ref([]);
const pageSizeOptions = ref(['15', '20', '30', '40', '50']);
const emits = defineEmits(["success"])
const queryParams = reactive({
  pageNo: 1,
  pageSize: 15,
  userId:"",
  status:1,
  keyword:''
})

const columns = [
  {title: '选择', dataIndex: 'selectNum',align:"center"},
  {title: '序号', dataIndex: 'jobname',align:"center",customRender:({text,record,index})=>index+1},
  {title: '船员姓名/身份证', dataIndex: 'jobname',align:"center"},
  {title: '岸基', dataIndex: 'jobname',align:"center"},
  {title: '证书职位', dataIndex: 'jobname',align:"center"},
  {title: '最近工作记录', dataIndex: 'jobname',align:"center"},
  {title: '考核结果', dataIndex: 'jobnum',align:"center", width: 200},
  {title: '船员状态', dataIndex: 'jobnum',align:"center", width: 200}
];


/**
 * 查询列表数据
 */
const handleLoadData = async ()=>{
  tableLoading.value = true
  tableData.value  = [{'jobname':'船长','jobnum':1}]
  tableLoading.value = false
  total.value = 0
}

// 改变分页查询
const handleChangePageNo = (pno, psize) => {
  queryParams.pageNo = pno;
  queryParams.pageSize = psize;
  handleLoadData()
}

// 绑定角色
const handleBindRoles = async(id) => {
  await useHandleBindRoleApi({userId:queryParams.userId,roleId:id})
  tableData.value.find(c=>c.id==id).bindFlag = true
  useMessage().success("绑定成功!!!")
}

// 取消绑定
const handleCancleBindRoles = async(id) => {
  await useHandleCancleRoleApi({userId:queryParams.userId,roleId:id})
  tableData.value.find(c=>c.id==id).bindFlag = false
  useMessage().success("取消绑定成功!!!")
}

const handleClose = ()=>{
  open.value = false;
}

const handleOpen = ()=>{
  open.value = true;
}


defineExpose({
  handleOpen
})
</script>

